import { SVG } from "@libs/svg.js-3.2.0/build/svg.esm.js";
import svgRawContent from "./igv.svg?raw";
import { initializeIGVSVGPack } from "./igvsvg";

window.addEventListener("load", async () => {

    const domElement = document.querySelector("#drawing");
    const craneSVGPack = await initializeIGVSVGPack(domElement, svgRawContent);
    const {
        draw,
        setContainerMode,
        resetStatus
    } = craneSVGPack;
    draw.viewbox(0, 0, 980, 330);
    // draw.attr("width", "1000");
    // draw.attr("height", "330");

    resetStatus();

    // setContainerMode("");
    // setContainerMode("Single20_Front");
    // setContainerMode("Single20_Behind");
    setContainerMode("Double20");
    // setContainerMode("40");

    // const rect1 = draw.rect(10, 175).move(29, 45).fill('#FF8E00');
    // const rect2 = draw.rect(10, 175).move(425 + 29 + 10 - 1, 45).fill('#FF8E00');
    // const rect3 = draw.rect(10, 175).move(512, 45).fill('#FF8E00');
    // const rect4 = draw.rect(10, 175).move(512 + 425 + 10 - 1, 45).fill('#FF8E00');

    draw.text('Hello, SVG.js!\nHello, SVGDOTJS\nHello, SVGDOTJS').font({
        size: 18,
        family: 'Helvetica, sans-serif',
        fill: '#333'
    }).move(100, 50);
})